83:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 85:T1877d,[V0_FILE]typescript:file="lib/spreadsheet/utils.ts" isMerged="true" export function colToLetter(col: number): string { let letter = "" let temp = col while (temp >= 0) { letter = String.fromCharCode((temp % 26) + 65) + letter temp = Math.floor(temp / 26) - 1 } return letter } export function letterToCol(letter: string): number { let col = 0 for (let i = 0; i < letter.length; i++) { col = col * 26 + (letter.charCodeAt(i) - 64) } return col - 1 } export function getCellId(row: number, col: number): string { return `${colToLetter(col)}${row + 1}` } export function parseCellId(cellId: string): { row: number; col: number } | null { const match = cellId.match(/^([A-Z]+)(\d+)$/) if (!match) return null return { col: letterToCol(match[1]), row: Number.parseInt(match[2], 10) - 1, } } export function getSelectionCells( start: { row: number; col: number }, end: { row: number; col: number }, ): { row: number; col: number }[] { const cells: { row: number; col: number }[] = [] const minRow = Math.min(start.row, end.row) const maxRow = Math.max(start.row, end.row) const minCol = Math.min(start.col, end.col) const maxCol = Math.max(start.col, end.col) for (let row = minRow; row <= maxRow; row++) { for (let col = minCol; col <= maxCol; col++) { cells.push({ row, col }) } } return cells } export function isInSelection( row: number, col: number, selection: { start: { row: number; col: number }; end: { row: number; col: number } } | null, ): boolean { if (!selection) return false const minRow = Math.min(selection.start.row, selection.end.row) const maxRow = Math.max(selection.start.row, selection.end.row) const minCol = Math.min(selection.start.col, selection.end.col) const maxCol = Math.max(selection.start.col, selection.end.col) return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Spreadsheet } from "@/components/spreadsheet/spreadsheet" export default function Home() { return } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@tanstack/react-virtual": "3.13.14" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sheets Clone", description: "A Google Sheets clone built with Next.js", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Monitor, Sun, Moon } from "lucide-react" type Theme = "system" | "light" | "dark" export function ThemeSwitcher() { const [theme, setTheme] = useState("system") useEffect(() => { const stored = localStorage.getItem("theme") as Theme | null if (stored) { setTheme(stored) applyTheme(stored) } }, []) const applyTheme = (newTheme: Theme) => { const root = document.documentElement root.classList.remove("light", "dark") if (newTheme === "system") { const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches root.classList.add(systemDark ? "dark" : "light") } else { root.classList.add(newTheme) } } const handleThemeChange = (newTheme: Theme) => { setTheme(newTheme) localStorage.setItem("theme", newTheme) applyTheme(newTheme) } return (

Select a display theme: handleThemeChange("system")} className="sr-only" aria-label="system" /> handleThemeChange("light")} className="sr-only" aria-label="light" /> handleThemeChange("dark")} className="sr-only" aria-label="dark" />

) } [V0_FILE]typescriptreact:file="components/spreadsheet/formula-highlighter.tsx" isMerged="true" "use client" import type React from "react" import { memo, useMemo } from "react" interface Token { type: "function" | "cell" | "range" | "number" | "string" | "operator" | "paren" | "comma" | "equals" | "text" value: string } function tokenizeFormula(formula: string): Token[] { const tokens: Token[] = [] let i = 0 // Check if it starts with = if (formula[0] !== "=") { return [{ type: "text", value: formula }] } // Add the equals sign tokens.push({ type: "equals", value: "=" }) i = 1 while (i < formula.length) { const char = formula[i] // Whitespace if (/\s/.test(char)) { tokens.push({ type: "text", value: char }) i++ continue } // String literals if (char === '"') { let str = '"' i++ while (i < formula.length && formula[i] !== '"') { str += formula[i] i++ } if (i < formula.length) { str += '"' i++ } tokens.push({ type: "string", value: str }) continue } // Numbers (including decimals) if (/[0-9]/.test(char) || (char === "." && /[0-9]/.test(formula[i + 1] || ""))) { let num = "" while (i < formula.length && /[0-9.]/.test(formula[i])) { num += formula[i] i++ } tokens.push({ type: "number", value: num }) continue } // Cell references or function names (start with letter) if (/[A-Za-z]/.test(char)) { let word = "" const startI = i while (i < formula.length && /[A-Za-z0-9_$]/.test(formula[i])) { word += formula[i] i++ } // Check if it's a range (e.g., A1:B10) if (formula[i] === ":") { const colonStart = i i++ let rangeEnd = "" while (i < formula.length && /[A-Za-z0-9$]/.test(formula[i])) { rangeEnd += formula[i] i++ } if (rangeEnd) { tokens.push({ type: "range", value: word + ":" + rangeEnd }) continue } else { i = colonStart } } // Check if it's a function (followed by parenthesis) if (formula[i] === "(") { tokens.push({ type: "function", value: word }) continue } // Check if it's a cell reference (letter(s) + number(s)) if (/^[A-Za-z$]+[0-9]+$/.test(word)) { tokens.push({ type: "cell", value: word }) continue } // Otherwise it's just text tokens.push({ type: "text", value: word }) continue } // Operators if (/[+\-*/^%]/.test(char)) { tokens.push({ type: "operator", value: char }) i++ continue } // Comparison operators if (char === "<" || char === ">" || char === "=") { let op = char i++ if (formula[i] === "=" || formula[i] === ">") { op += formula[i] i++ } tokens.push({ type: "operator", value: op }) continue } // Parentheses if (char === "(" || char === ")") { tokens.push({ type: "paren", value: char }) i++ continue } // Comma if (char === ",") { tokens.push({ type: "comma", value: char }) i++ continue } // Colon (range separator - standalone) if (char === ":") { tokens.push({ type: "operator", value: char }) i++ continue } // Anything else tokens.push({ type: "text", value: char }) i++ } return tokens } const tokenColors: Record = { function: "text-purple-500 dark:text-purple-400", cell: "text-blue-500 dark:text-blue-400", range: "text-blue-500 dark:text-blue-400", number: "text-orange-500 dark:text-orange-400", string: "text-green-500 dark:text-green-400", operator: "text-yellow-500 dark:text-yellow-300", paren: "text-muted-foreground", comma: "text-muted-foreground", equals: "text-muted-foreground", text: "text-foreground", } interface FormulaHighlighterProps { value: string className?: string } export const FormulaHighlighter = memo(function FormulaHighlighter({ value, className = "" }: FormulaHighlighterProps) { const tokens = useMemo(() => tokenizeFormula(value), [value]) return ( {tokens.map((token, i) => ( {token.value} ))} ) }) interface FormulaInputProps { value: string onChange: (value: string) => void onKeyDown: (e: React.KeyboardEvent) => void className?: string style?: React.CSSProperties autoFocus?: boolean } export const FormulaInput = memo(function FormulaInput({ value, onChange, onKeyDown, className = "", style, autoFocus, }: FormulaInputProps) { const isFormula = value.startsWith("=") const tokens = useMemo(() => (isFormula ? tokenizeFormula(value) : []), [value, isFormula]) return (

{/* Hidden input for actual editing */} onChange(e.target.value)} onKeyDown={onKeyDown} autoFocus={autoFocus} className="absolute inset-0 w-full h-full bg-transparent outline-none font-mono caret-foreground" style={{ ...style, color: isFormula ? "transparent" : "inherit", caretColor: "inherit", }} spellCheck={false} /> {/* Visible highlighted overlay */} {isFormula && ( {tokens.map((token, i) => ( {token.value} ))} )}

) }) [V0_FILE]typescriptreact:file="components/spreadsheet/formula-bar.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { getCellId } from "@/lib/spreadsheet/utils" import { FormulaHighlighter } from "./formula-highlighter" interface FormulaBarProps { activeCell: { row: number; col: number } | null value: string onChange: (value: string) => void onCommit: () => void } export function FormulaBar({ activeCell, value, onChange, onCommit }: FormulaBarProps) { const inputRef = useRef(null) const [localValue, setLocalValue] = useState(value) const [isFocused, setIsFocused] = useState(false) useEffect(() => { setLocalValue(value) }, [value]) const cellRef = activeCell ? getCellId(activeCell.row, activeCell.col) : "" const isFormula = localValue.startsWith("=") const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault() onChange(localValue) onCommit() inputRef.current?.blur() } else if (e.key === "Escape") { e.preventDefault() setLocalValue(value) inputRef.current?.blur() } } return (

{cellRef}

{/* Input for editing */} { setLocalValue(e.target.value) onChange(e.target.value) }} onKeyDown={handleKeyDown} onFocus={() => setIsFocused(true)} onBlur={() => { setIsFocused(false) onChange(localValue) }} className="absolute inset-0 w-full h-full bg-transparent outline-none text-sm font-mono" style={{ color: isFormula && !isFocused ? "transparent" : "inherit" }} placeholder="Enter value or formula" spellCheck={false} /> {/* Highlighted overlay when not focused */} {isFormula && !isFocused && (

)}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Light mode - clean white with subtle grays */ --background: #ffffff; --foreground: #000000; --card: #ffffff; --card-foreground: #000000; --popover: #ffffff; --popover-foreground: #000000; --primary: #ffffff; --primary-foreground: #000000; --secondary: #f5f5f5; --secondary-foreground: #000000; --muted: #fafafa; --muted-foreground: #666666; --accent: #f5f5f5; --accent-foreground: #000000; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e5e5; --input: #f5f5f5; --ring: #000000; --radius: 0; /* Spreadsheet vars - light mode */ --cell-bg: #ffffff; --cell-border: #e5e5e5; --header-bg: #fafafa; /* selection colors to blue */ --selection-bg: rgba(59, 130, 246, 0.1); --selection-border: #3b82f6; } .dark { /* Dark mode - pure black like Basedash/Vercel */ --background: #000000; --foreground: #ffffff; --card: #000000; --card-foreground: #ffffff; --popover: #111111; --popover-foreground: #ffffff; --primary: #ffffff; --primary-foreground: #000000; --secondary: #111111; --secondary-foreground: #ffffff; --muted: #111111; --muted-foreground: #888888; --accent: #111111; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #222222; --input: #111111; --ring: #ffffff; /* Spreadsheet vars - dark mode pure black */ --cell-bg: #000000; --cell-border: #222222; --header-bg: #0a0a0a; /* selection colors to blue */ --selection-bg: rgba(59, 130, 246, 0.15); --selection-border: #3b82f6; } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); /* No border radius - sharp edges */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-cell-bg: var(--cell-bg); --color-cell-border: var(--cell-border); --color-header-bg: var(--header-bg); --color-selection-bg: var(--selection-bg); --color-selection-border: var(--selection-border); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Hide scrollbars while maintaining scroll functionality */ .scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } [V0_FILE]typescript:file="lib/spreadsheet/types.ts" isEdit="true" isQuickEdit="true" isMerged="true" export interface CellStyle { bold?: boolean italic?: boolean underline?: boolean align?: "left" | "center" | "right" backgroundColor?: string textColor?: string fontSize?: number } export interface Cell { value: string formula?: string style?: CellStyle } export type CellData = Record export interface Selection { start: { row: number; col: number } end: { row: number; col: number } } export interface ClipboardData { cells: { row: number; col: number; cell: Cell }[] startRow: number startCol: number endRow: number endCol: number } export interface SpreadsheetState { cells: CellData selection: Selection | null activeCell: { row: number; col: number } | null editingCell: { row: number; col: number } | null columnWidths: Record rowHeights: Record history: CellData[] historyIndex: number } export type SpreadsheetAction = | { type: "SET_CELL"; row: number; col: number; value: string } | { type: "SET_STYLE"; style: Partial } | { type: "SELECT_CELL"; row: number; col: number } | { type: "SELECT_RANGE"; start: { row: number; col: number }; end: { row: number; col: number } } | { type: "START_EDITING"; row: number; col: number } | { type: "STOP_EDITING" } | { type: "SET_COLUMN_WIDTH"; col: number; width: number } | { type: "SET_ROW_HEIGHT"; row: number; height: number } | { type: "UNDO" } | { type: "REDO" } | { type: "CLEAR_SELECTION" } | { type: "INIT_CELLS"; cells: CellData } | { type: "CLEAR_CELLS" } | { type: "SELECT_ALL"; totalRows: number; totalCols: number } | { type: "PASTE_CELLS"; clipboard: ClipboardData; targetRow: number; targetCol: number } [V0_FILE]typescriptreact:file="components/spreadsheet/find-dialog.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import { X, ChevronUp, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { CellData } from "@/lib/spreadsheet/types" import { parseCellId } from "@/lib/spreadsheet/utils" interface FindMatch { cellId: string row: number col: number } interface FindDialogProps { isOpen: boolean onClose: () => void cells: CellData onNavigateToCell: (row: number, col: number) => void } export function FindDialog({ isOpen, onClose, cells, onNavigateToCell }: FindDialogProps) { const [searchTerm, setSearchTerm] = useState("") const [matches, setMatches] = useState([]) const [currentMatchIndex, setCurrentMatchIndex] = useState(0) const inputRef = useRef(null) useEffect(() => { if (isOpen && inputRef.current) { inputRef.current.focus() } }, [isOpen]) useEffect(() => { if (!searchTerm.trim()) { setMatches([]) setCurrentMatchIndex(0) return } const term = searchTerm.toLowerCase() const found: FindMatch[] = [] Object.entries(cells).forEach(([cellId, cell]) => { const value = cell.value?.toLowerCase() || "" const formula = cell.formula?.toLowerCase() || "" if (value.includes(term) || formula.includes(term)) { const parsed = parseCellId(cellId) if (parsed) { found.push({ cellId, row: parsed.row, col: parsed.col }) } } }) // Sort by row then column found.sort((a, b) => a.row - b.row || a.col - b.col) setMatches(found) setCurrentMatchIndex(0) if (found.length > 0) { onNavigateToCell(found[0].row, found[0].col) } }, [searchTerm, cells, onNavigateToCell]) const goToNext = useCallback(() => { if (matches.length === 0) return const nextIndex = (currentMatchIndex + 1) % matches.length setCurrentMatchIndex(nextIndex) onNavigateToCell(matches[nextIndex].row, matches[nextIndex].col) }, [matches, currentMatchIndex, onNavigateToCell]) const goToPrevious = useCallback(() => { if (matches.length === 0) return const prevIndex = (currentMatchIndex - 1 + matches.length) % matches.length setCurrentMatchIndex(prevIndex) onNavigateToCell(matches[prevIndex].row, matches[prevIndex].col) }, [matches, currentMatchIndex, onNavigateToCell]) const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault() if (e.shiftKey) { goToPrevious() } else { goToNext() } } else if (e.key === "Escape") { onClose() } } if (!isOpen) return null return (

setSearchTerm(e.target.value)} onKeyDown={handleKeyDown} className="w-48 h-8 text-sm font-mono rounded-none" /> {matches.length > 0 ? `${currentMatchIndex + 1}/${matches.length}` : "0/0"}

) } [V0_FILE]typescriptreact:file="components/spreadsheet/command-palette.tsx" isEdit="true" isMerged="true" "use client" import { useMemo } from "react" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from "@/components/ui/command" import { Dialog, DialogContent } from "@/components/ui/dialog" interface CommandPaletteProps { isOpen: boolean onClose: () => void onUndo: () => void onRedo: () => void onSelectAll: () => void onFind: () => void canUndo: boolean canRedo: boolean } interface ShortcutItem { id: string label: string shortcut: string category: string action?: () => void disabled?: boolean } export function CommandPalette({ isOpen, onClose, onUndo, onRedo, onSelectAll, onFind, canUndo, canRedo, }: CommandPaletteProps) { const isMac = typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0 const mod = isMac ? "⌘" : "Ctrl" const shortcuts: ShortcutItem[] = useMemo( () => [ // Edit { id: "undo", label: "Undo", shortcut: `${mod}+Z`, category: "Edit", action: onUndo, disabled: !canUndo }, { id: "redo", label: "Redo", shortcut: `${mod}+Shift+Z`, category: "Edit", action: onRedo, disabled: !canRedo }, { id: "cut", label: "Cut", shortcut: `${mod}+X`, category: "Edit" }, { id: "copy", label: "Copy", shortcut: `${mod}+C`, category: "Edit" }, { id: "paste", label: "Paste", shortcut: `${mod}+V`, category: "Edit" }, { id: "delete", label: "Delete cells", shortcut: "Delete", category: "Edit" }, { id: "find", label: "Find", shortcut: `${mod}+F`, category: "Edit", action: onFind }, // Selection { id: "select-all", label: "Select all", shortcut: `${mod}+A`, category: "Selection", action: onSelectAll }, { id: "select-row", label: "Select row", shortcut: "Shift+Space", category: "Selection" }, { id: "select-col", label: "Select column", shortcut: `${mod}+Space`, category: "Selection" }, { id: "extend-up", label: "Extend selection up", shortcut: "Shift+↑", category: "Selection" }, { id: "extend-down", label: "Extend selection down", shortcut: "Shift+↓", category: "Selection" }, { id: "extend-left", label: "Extend selection left", shortcut: "Shift+←", category: "Selection" }, { id: "extend-right", label: "Extend selection right", shortcut: "Shift+→", category: "Selection" }, { id: "extend-top", label: "Extend to top", shortcut: `${mod}+Shift+↑`, category: "Selection" }, { id: "extend-bottom", label: "Extend to bottom", shortcut: `${mod}+Shift+↓`, category: "Selection" }, { id: "extend-start", label: "Extend to start", shortcut: `${mod}+Shift+←`, category: "Selection" }, { id: "extend-end", label: "Extend to end", shortcut: `${mod}+Shift+→`, category: "Selection" }, // Navigation { id: "go-start", label: "Go to start (A1)", shortcut: `${mod}+Home`, category: "Navigation" }, { id: "go-end", label: "Go to last cell", shortcut: `${mod}+End`, category: "Navigation" }, { id: "nav-up", label: "Move up", shortcut: "↑", category: "Navigation" }, { id: "nav-down", label: "Move down", shortcut: "↓", category: "Navigation" }, { id: "nav-left", label: "Move left", shortcut: "←", category: "Navigation" }, { id: "nav-right", label: "Move right", shortcut: "→", category: "Navigation" }, { id: "nav-tab", label: "Move to next cell", shortcut: "Tab", category: "Navigation" }, { id: "nav-enter", label: "Move down / Confirm", shortcut: "Enter", category: "Navigation" }, ], [mod, onUndo, onRedo, onSelectAll, onFind, canUndo, canRedo], ) const categories = useMemo(() => { const cats: Record = {} for (const item of shortcuts) { if (!cats[item.category]) cats[item.category] = [] cats[item.category].push(item) } return cats }, [shortcuts]) const handleSelect = (item: ShortcutItem) => { if (item.action && !item.disabled) { item.action() } onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/spreadsheet/toolbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Paintbrush, Type } from "lucide-react" import type { CellStyle } from "@/lib/spreadsheet/types" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface ToolbarProps { currentStyle: CellStyle | undefined onStyleChange: (style: Partial) => void onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean } const COLORS = [ "transparent", "#ffffff", "#111111", "#222222", "#333333", "#ef4444", "#22c55e", "#3b82f6", "#eab308", "#8b5cf6", "#ec4899", ] const TEXT_COLORS = [ "inherit", "#ffffff", "#111111", "#666666", "#999999", "#ef4444", "#22c55e", "#3b82f6", "#eab308", "#8b5cf6", "#ec4899", ] const FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32] export function Toolbar({ currentStyle, onStyleChange, onUndo, onRedo, canUndo, canRedo }: ToolbarProps) { return (

{COLORS.map((color) => (

{TEXT_COLORS.map((color) => ( ))}

) } [V0_FILE]typescriptreact:file="components/spreadsheet/column-header.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { memo, useCallback, useRef } from "react" import { colToLetter } from "@/lib/spreadsheet/utils" import { cn } from "@/lib/utils" interface ColumnHeaderProps { col: number width: number isSelected: boolean onResizeLive: (col: number, width: number) => void onResizeEnd: (col: number, width: number) => void onSelect: (col: number) => void } export const ColumnHeader = memo(function ColumnHeader({ col, width, isSelected, onResizeLive, onResizeEnd, onSelect, }: ColumnHeaderProps) { const startX = useRef(0) const startWidth = useRef(0) const handleMouseDown = useCallback( (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() startX.current = e.clientX startWidth.current = width const handleMouseMove = (e: MouseEvent) => { const diff = e.clientX - startX.current const newWidth = Math.max(40, startWidth.current + diff) onResizeLive(col, newWidth) } const handleMouseUp = (e: MouseEvent) => { const diff = e.clientX - startX.current const newWidth = Math.max(40, startWidth.current + diff) onResizeEnd(col, newWidth) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) }, [col, width, onResizeLive, onResizeEnd], ) const handleDoubleClick = useCallback( (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() const newWidth = width <= 100 ? 150 : 100 onResizeEnd(col, newWidth) }, [col, width, onResizeEnd], ) return (

onSelect(col)} > {colToLetter(col)}

) }) [V0_FILE]typescriptreact:file="components/spreadsheet/row-header.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { memo, useCallback, useRef } from "react" import { cn } from "@/lib/utils" interface RowHeaderProps { row: number height: number isSelected: boolean onSelect: (row: number) => void onResizeLive: (row: number, height: number) => void onResizeEnd: (row: number, height: number) => void } export const RowHeader = memo(function RowHeader({ row, height, isSelected, onSelect, onResizeLive, onResizeEnd, }: RowHeaderProps) { const startYRef = useRef(0) const startHeightRef = useRef(height) const handleResizeStart = useCallback( (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() startYRef.current = e.clientY startHeightRef.current = height const handleMouseMove = (e: MouseEvent) => { const delta = e.clientY - startYRef.current const newHeight = Math.max(20, Math.min(200, startHeightRef.current + delta)) onResizeLive(row, newHeight) } const handleMouseUp = (e: MouseEvent) => { const delta = e.clientY - startYRef.current const finalHeight = Math.max(20, Math.min(200, startHeightRef.current + delta)) onResizeEnd(row, finalHeight) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) }, [row, height, onResizeLive, onResizeEnd], ) const handleDoubleClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation() onResizeEnd(row, height === 24 ? 48 : 24) }, [row, height, onResizeEnd], ) return (

onSelect(row)} > {row + 1}

) }) [V0_FILE]typescript:file="lib/spreadsheet/formula-parser.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { CellData } from "./types" import { parseCellId, getCellId } from "./utils" const FUNC_NAMES = "SUM|AVERAGE|COUNT|MIN|MAX|ROUND|ABS|SQRT|POW|CONCAT|LEN|UPPER|LOWER|TRIM|NOW|TODAY|IF|COUNTA|COUNTBLANK|PRODUCT|MOD|INT|CEILING|FLOOR" let cellsVersion = 0 let lastCellsRef: CellData | null = null const displayCache = new Map() export function clearFormulaCache() { displayCache.clear() cellsVersion++ } function checkCellsVersion(cells: CellData): void { if (cells !== lastCellsRef) { lastCellsRef = cells cellsVersion++ displayCache.clear() } } export function evaluateFormula(formula: string, cells: CellData, visited: Set = new Set()): string | number { if (!formula.startsWith("=")) { return formula } const expression = formula.slice(1).trim().toUpperCase() try { const funcPattern = new RegExp("^(" + FUNC_NAMES + ")[(](.+)[)]$", "i") const funcMatch = expression.match(funcPattern) if (funcMatch) { const [, func, args] = funcMatch return evaluateFunction(func.toUpperCase(), args, cells, visited) } return evaluateExpression(expression, cells, visited) } catch { return "#ERROR" } } function evaluateFunction(func: string, args: string, cells: CellData, visited: Set): string | number { switch (func) { case "SUM": { const values = parseRange(args, cells, visited) return values.reduce((sum, val) => sum + (typeof val === "number" ? val : 0), 0) } case "AVERAGE": { const values = parseRange(args, cells, visited) const nums = values.filter((v) => typeof v === "number") as number[] return nums.length > 0 ? nums.reduce((a, b) => a + b, 0) / nums.length : 0 } case "COUNT": { const values = parseRange(args, cells, visited) return values.filter((v) => typeof v === "number").length } case "COUNTA": { const values = parseRange(args, cells, visited) return values.filter((v) => v !== "" && v !== 0).length } case "COUNTBLANK": { const values = parseRange(args, cells, visited) return values.filter((v) => v === "" || v === 0).length } case "MIN": { const values = parseRange(args, cells, visited) const nums = values.filter((v) => typeof v === "number") as number[] return nums.length > 0 ? Math.min(...nums) : 0 } case "MAX": { const values = parseRange(args, cells, visited) const nums = values.filter((v) => typeof v === "number") as number[] return nums.length > 0 ? Math.max(...nums) : 0 } case "PRODUCT": { const values = parseRange(args, cells, visited) const nums = values.filter((v) => typeof v === "number") as number[] return nums.length > 0 ? nums.reduce((a, b) => a * b, 1) : 0 } case "ROUND": { const parts = splitArgs(args) const num = parseNumericArg(parts[0], cells, visited) const decimals = parts[1] ? parseNumericArg(parts[1], cells, visited) : 0 const factor = Math.pow(10, decimals) return Math.round(num * factor) / factor } case "ABS": { const num = parseNumericArg(args, cells, visited) return Math.abs(num) } case "SQRT": { const num = parseNumericArg(args, cells, visited) return num >= 0 ? Math.sqrt(num) : "#ERROR" } case "POW": { const parts = splitArgs(args) const base = parseNumericArg(parts[0], cells, visited) const exp = parseNumericArg(parts[1], cells, visited) return Math.pow(base, exp) } case "MOD": { const parts = splitArgs(args) const num = parseNumericArg(parts[0], cells, visited) const divisor = parseNumericArg(parts[1], cells, visited) return divisor !== 0 ? num % divisor : "#DIV/0!" } case "INT": { const num = parseNumericArg(args, cells, visited) return Math.floor(num) } case "CEILING": { const parts = splitArgs(args) const num = parseNumericArg(parts[0], cells, visited) const significance = parts[1] ? parseNumericArg(parts[1], cells, visited) : 1 return Math.ceil(num / significance) * significance } case "FLOOR": { const parts = splitArgs(args) const num = parseNumericArg(parts[0], cells, visited) const significance = parts[1] ? parseNumericArg(parts[1], cells, visited) : 1 return Math.floor(num / significance) * significance } case "CONCAT": { const parts = splitArgs(args) return parts.map((p) => parseStringArg(p, cells, visited)).join("") } case "LEN": { const str = parseStringArg(args, cells, visited) return str.length } case "UPPER": { const str = parseStringArg(args, cells, visited) return str.toUpperCase() } case "LOWER": { const str = parseStringArg(args, cells, visited) return str.toLowerCase() } case "TRIM": { const str = parseStringArg(args, cells, visited) return str.trim() } case "NOW": { const now = new Date() return now.toLocaleString() } case "TODAY": { const now = new Date() return now.toLocaleDateString() } case "IF": { const parts = splitArgs(args) if (parts.length < 3) return "#ERROR" const condition = evaluateCondition(parts[0], cells, visited) const trueVal = parseArg(parts[1], cells, visited) const falseVal = parseArg(parts[2], cells, visited) return condition ? trueVal : falseVal } default: return "#NAME?" } } function splitArgs(args: string): string[] { const result: string[] = [] let current = "" let depth = 0 for (const char of args) { if (char === "(") depth++ else if (char === ")") depth-- else if (char === "," && depth === 0) { result.push(current.trim()) current = "" continue } current += char } if (current.trim()) { result.push(current.trim()) } return result } function parseNumericArg(arg: string, cells: CellData, visited: Set): number { const trimmed = arg.trim() if (/^[A-Z]+\d+$/i.test(trimmed)) { const value = getCellValue(trimmed.toUpperCase(), cells, visited) return typeof value === "number" ? value : Number.parseFloat(String(value)) || 0 } if (trimmed.includes("(")) { const result = evaluateFormula("=" + trimmed, cells, new Set(visited)) return typeof result === "number" ? result : Number.parseFloat(String(result)) || 0 } return Number.parseFloat(trimmed) || 0 } function parseStringArg(arg: string, cells: CellData, visited: Set): string { const trimmed = arg.trim() if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) { return trimmed.slice(1, -1) } if (/^[A-Z]+\d+$/i.test(trimmed)) { const value = getCellValue(trimmed.toUpperCase(), cells, visited) return String(value) } if (trimmed.includes("(")) { const result = evaluateFormula("=" + trimmed, cells, new Set(visited)) return String(result) } return trimmed } function parseArg(arg: string, cells: CellData, visited: Set): string | number { const trimmed = arg.trim() if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) { return trimmed.slice(1, -1) } if (/^[A-Z]+\d+$/i.test(trimmed)) { return getCellValue(trimmed.toUpperCase(), cells, visited) } if (trimmed.includes("(")) { return evaluateFormula("=" + trimmed, cells, new Set(visited)) } const num = Number.parseFloat(trimmed) return isNaN(num) ? trimmed : num } function evaluateCondition(condition: string, cells: CellData, visited: Set): boolean { const trimmed = condition.trim() const operators = [">=", "<=", "<>", "!=", "=", ">", "<"] for (const op of operators) { const idx = trimmed.indexOf(op) if (idx !== -1) { const left = parseArg(trimmed.slice(0, idx), cells, visited) const right = parseArg(trimmed.slice(idx + op.length), cells, visited) switch (op) { case ">=": return Number(left) >= Number(right) case "<=": return Number(left) <= Number(right) case "<>": case "!=": return left !== right case "=": return left === right case ">": return Number(left) > Number(right) case "<": return Number(left) < Number(right) } } } const val = parseArg(trimmed, cells, visited) return Boolean(val) } function parseRange(args: string, cells: CellData, visited: Set): (string | number)[] { const values: (string | number)[] = [] const rangeMatch = args.match(/^([A-Z]+\d+):([A-Z]+\d+)$/i) if (rangeMatch) { const start = parseCellId(rangeMatch[1].toUpperCase()) const end = parseCellId(rangeMatch[2].toUpperCase()) if (start && end) { const minRow = Math.min(start.row, end.row) const maxRow = Math.max(start.row, end.row) const minCol = Math.min(start.col, end.col) const maxCol = Math.max(start.col, end.col) for (let row = minRow; row <= maxRow; row++) { for (let col = minCol; col <= maxCol; col++) { const cellId = getCellId(row, col) const value = getCellValue(cellId, cells, visited) values.push(value) } } } return values } const parts = splitArgs(args) for (const part of parts) { const subRangeMatch = part.match(/^([A-Z]+\d+):([A-Z]+\d+)$/i) if (subRangeMatch) { values.push(...parseRange(part, cells, visited)) } else if (/^[A-Z]+\d+$/i.test(part)) { values.push(getCellValue(part.toUpperCase(), cells, visited)) } else { const num = Number.parseFloat(part) values.push(isNaN(num) ? part : num) } } return values } function getCellValue(cellId: string, cells: CellData, visited: Set): string | number { if (visited.has(cellId)) { return "#REF" } const cell = cells[cellId] if (!cell || (!cell.value && !cell.formula)) return 0 if (cell.formula) { visited.add(cellId) const result = evaluateFormula(cell.formula, cells, new Set(visited)) return typeof result === "string" && !isNaN(Number.parseFloat(result)) ? Number.parseFloat(result) : result } const num = Number.parseFloat(cell.value) return isNaN(num) ? cell.value : num } function evaluateExpression(expression: string, cells: CellData, visited: Set): string | number { const evaluated = expression.replace(/[A-Z]+\d+/gi, (match) => { const value = getCellValue(match.toUpperCase(), cells, new Set(visited)) return typeof value === "number" ? value.toString() : `"${value}"` }) if (!/^[\d\s+\-*/().,"]+$/.test(evaluated)) { return "#ERROR" } try { const result = new Function(`return ${evaluated}`)() return typeof result === "number" && isFinite(result) ? result : "#ERROR" } catch { return "#ERROR" } } export function getDisplayValue(cellId: string, cells: CellData): string { checkCellsVersion(cells) const cached = displayCache.get(cellId) if (cached !== undefined) { return cached } const cell = cells[cellId] if (!cell) return "" let result: string if (cell.formula) { const evalResult = evaluateFormula(cell.formula, cells) result = typeof evalResult === "number" ? evalResult.toString() : evalResult } else { result = cell.value || "" } displayCache.set(cellId, result) return result } export function getDisplayValues(cellIds: string[], cells: CellData): Map { checkCellsVersion(cells) const results = new Map() for (const cellId of cellIds) { results.set(cellId, getDisplayValue(cellId, cells)) } return results } [V0_FILE]typescriptreact:file="components/spreadsheet/grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useCallback, useRef, useState, useEffect, useMemo } from "react" import { useVirtualizer } from "@tanstack/react-virtual" import { Cell } from "./cell" import { ColumnHeader } from "./column-header" import { RowHeader } from "./row-header" import type { CellData, Selection } from "@/lib/spreadsheet/types" import { getCellId } from "@/lib/spreadsheet/utils" import { getDisplayValue } from "@/lib/spreadsheet/formula-parser" interface GridProps { cells: CellData selection: Selection | null activeCell: { row: number; col: number } | null editingCell: { row: number; col: number } | null columnWidths: Record rowHeights: Record onCellChange: (row: number, col: number, value: string) => void onSelect: (row: number, col: number) => void onSelectRange: (start: { row: number; col: number }, end: { row: number; col: number }) => void onStartEditing: (row: number, col: number) => void onStopEditing: () => void onColumnResize: (col: number, width: number) => void onRowResize: (row: number, height: number) => void } const NUM_COLS = 26 const NUM_ROWS = 100 const DEFAULT_COL_WIDTH = 100 const DEFAULT_ROW_HEIGHT = 24 const ROW_HEADER_WIDTH = 48 const COL_HEADER_HEIGHT = 24 export function Grid({ cells, selection, activeCell, editingCell, columnWidths, rowHeights, onCellChange, onSelect, onSelectRange, onStartEditing, onStopEditing, onColumnResize, onRowResize, }: GridProps) { const containerRef = useRef(null) const isDraggingRef = useRef(false) const dragStartRef = useRef<{ row: number; col: number } | null>(null) const [liveColumnWidths, setLiveColumnWidths] = useState>({}) const [liveRowHeights, setLiveRowHeights] = useState>({}) const [, forceUpdate] = useState(0) const pendingEditGetterRef = useRef<(() => string | null) | null>(null) const editingCellRef = useRef<{ row: number; col: number } | null>(null) useEffect(() => { editingCellRef.current = editingCell }, [editingCell]) const mergedColumnWidths = useMemo(() => { const merged: Record = {} for (let i = 0; i < NUM_COLS; i++) { merged[i] = liveColumnWidths[i] ?? columnWidths[i] ?? DEFAULT_COL_WIDTH } return merged }, [columnWidths, liveColumnWidths]) const mergedRowHeights = useMemo(() => { const merged: Record = {} for (let i = 0; i < NUM_ROWS; i++) { merged[i] = liveRowHeights[i] ?? rowHeights[i] ?? DEFAULT_ROW_HEIGHT } return merged }, [rowHeights, liveRowHeights]) const columnOffsets = useMemo(() => { const offsets: number[] = [0] for (let i = 0; i < NUM_COLS; i++) { offsets.push(offsets[i] + mergedColumnWidths[i]) } return offsets }, [mergedColumnWidths]) const rowOffsets = useMemo(() => { const offsets: number[] = [0] for (let i = 0; i < NUM_ROWS; i++) { offsets.push(offsets[i] + mergedRowHeights[i]) } return offsets }, [mergedRowHeights]) const totalWidth = columnOffsets[NUM_COLS] const totalHeight = rowOffsets[NUM_ROWS] const selectionBounds = useMemo(() => { if (!selection) return null return { minRow: Math.min(selection.start.row, selection.end.row), maxRow: Math.max(selection.start.row, selection.end.row), minCol: Math.min(selection.start.col, selection.end.col), maxCol: Math.max(selection.start.col, selection.end.col), } }, [selection]) const isInSelection = useCallback( (row: number, col: number) => { if (!selectionBounds) return false return ( row >= selectionBounds.minRow && row <= selectionBounds.maxRow && col >= selectionBounds.minCol && col <= selectionBounds.maxCol ) }, [selectionBounds], ) const getColWidth = useCallback((col: number) => mergedColumnWidths[col], [mergedColumnWidths]) const getRowHeight = useCallback((row: number) => mergedRowHeights[row], [mergedRowHeights]) const getColOffset = useCallback((col: number) => columnOffsets[col], [columnOffsets]) const getRowOffset = useCallback((row: number) => rowOffsets[row], [rowOffsets]) const rowVirtualizer = useVirtualizer({ count: NUM_ROWS, getScrollElement: () => containerRef.current, estimateSize: (index) => mergedRowHeights[index], overscan: 5, }) const columnVirtualizer = useVirtualizer({ horizontal: true, count: NUM_COLS, getScrollElement: () => containerRef.current, estimateSize: (index) => mergedColumnWidths[index], overscan: 3, }) useEffect(() => { columnVirtualizer.measure() }, [mergedColumnWidths, columnVirtualizer]) useEffect(() => { rowVirtualizer.measure() }, [mergedRowHeights, rowVirtualizer]) const commitPendingEdit = useCallback(() => { if (pendingEditGetterRef.current && editingCellRef.current) { const pendingValue = pendingEditGetterRef.current() if (pendingValue !== null) { onCellChange(editingCellRef.current.row, editingCellRef.current.col, pendingValue) } onStopEditing() } }, [onCellChange, onStopEditing]) const registerPendingEdit = useCallback((getValue: () => string | null) => { pendingEditGetterRef.current = getValue }, []) const getCellFromPoint = useCallback( (clientX: number, clientY: number): { row: number; col: number } | null => { if (!containerRef.current) return null const rect = containerRef.current.getBoundingClientRect() const scrollLeft = containerRef.current.scrollLeft const scrollTop = containerRef.current.scrollTop const x = clientX - rect.left + scrollLeft - ROW_HEADER_WIDTH const y = clientY - rect.top + scrollTop - COL_HEADER_HEIGHT if (x < 0 || y < 0) return null let col = 0 let lo = 0, hi = NUM_COLS - 1 while (lo <= hi) { const mid = Math.floor((lo + hi) / 2) if (columnOffsets[mid] <= x && x < columnOffsets[mid + 1]) { col = mid break } else if (columnOffsets[mid] > x) { hi = mid - 1 } else { lo = mid + 1 } } col = Math.min(Math.max(0, col), NUM_COLS - 1) let row = 0 lo = 0 hi = NUM_ROWS - 1 while (lo <= hi) { const mid = Math.floor((lo + hi) / 2) if (rowOffsets[mid] <= y && y < rowOffsets[mid + 1]) { row = mid break } else if (rowOffsets[mid] > y) { hi = mid - 1 } else { lo = mid + 1 } } row = Math.min(Math.max(0, row), NUM_ROWS - 1) return { row, col } }, [columnOffsets, rowOffsets], ) const handleCellSelect = useCallback( (row: number, col: number, extend?: boolean) => { commitPendingEdit() if (extend && activeCell) { onSelectRange(activeCell, { row, col }) } else { onSelect(row, col) dragStartRef.current = { row, col } isDraggingRef.current = true } }, [activeCell, onSelect, onSelectRange, commitPendingEdit], ) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isDraggingRef.current || !dragStartRef.current) return const cell = getCellFromPoint(e.clientX, e.clientY) if (cell) { onSelectRange(dragStartRef.current, cell) } } const handleMouseUp = () => { isDraggingRef.current = false dragStartRef.current = null forceUpdate((n) => n + 1) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [getCellFromPoint, onSelectRange]) const handleNavigate = useCallback( (direction: "up" | "down" | "left" | "right" | "tab" | "enter") => { if (!activeCell) return let { row, col } = activeCell switch (direction) { case "up": row = Math.max(0, row - 1) break case "down": case "enter": row = Math.min(NUM_ROWS - 1, row + 1) break case "left": col = Math.max(0, col - 1) break case "right": case "tab": col = Math.min(NUM_COLS - 1, col + 1) break } onSelect(row, col) }, [activeCell, onSelect], ) const handleColumnSelect = useCallback( (col: number) => { commitPendingEdit() onSelectRange({ row: 0, col }, { row: NUM_ROWS - 1, col }) }, [onSelectRange, commitPendingEdit], ) const handleRowSelect = useCallback( (row: number) => { commitPendingEdit() onSelectRange({ row, col: 0 }, { row, col: NUM_COLS - 1 }) }, [onSelectRange, commitPendingEdit], ) const handleColumnResizeLive = useCallback((col: number, width: number) => { setLiveColumnWidths((prev) => ({ ...prev, [col]: width })) }, []) const handleColumnResizeEnd = useCallback( (col: number, width: number) => { setLiveColumnWidths((prev) => { const next = { ...prev } delete next[col] return next }) onColumnResize(col, width) }, [onColumnResize], ) const handleRowResizeLive = useCallback((row: number, height: number) => { setLiveRowHeights((prev) => ({ ...prev, [row]: height })) }, []) const handleRowResizeEnd = useCallback( (row: number, height: number) => { setLiveRowHeights((prev) => { const next = { ...prev } delete next[row] return next }) onRowResize(row, height) }, [onRowResize], ) const isColumnSelected = useCallback( (col: number) => { return selectionBounds !== null && col >= selectionBounds.minCol && col <= selectionBounds.maxCol }, [selectionBounds], ) const isRowSelected = useCallback( (row: number) => { return selectionBounds !== null && row >= selectionBounds.minRow && row <= selectionBounds.maxRow }, [selectionBounds], ) const visibleCellData = useMemo(() => { const virtualRows = rowVirtualizer.getVirtualItems() const virtualCols = columnVirtualizer.getVirtualItems() const data: Record = {} for (const vRow of virtualRows) { for (const vCol of virtualCols) { const cellId = getCellId(vRow.index, vCol.index) data[cellId] = getDisplayValue(cellId, cells) } } return data }, [cells, rowVirtualizer.getVirtualItems(), columnVirtualizer.getVirtualItems()]) return (

{columnVirtualizer.getVirtualItems().map((virtualCol) => { const colWidth = getColWidth(virtualCol.index) const colOffset = getColOffset(virtualCol.index) return (

) })}

{rowVirtualizer.getVirtualItems().map((virtualRow) => { const rowHeight = getRowHeight(virtualRow.index) const rowOffset = getRowOffset(virtualRow.index) return (

{columnVirtualizer.getVirtualItems().map((virtualCol) => { const row = virtualRow.index const col = virtualCol.index const cellId = getCellId(row, col) const cell = cells[cellId] const isCellEditing = editingCell?.row === row && editingCell?.col === col const colWidth = getColWidth(col) const colOffset = getColOffset(col) const displayValue = visibleCellData[cellId] ?? "" return (

onCellChange(row, col, value)} onNavigate={handleNavigate} registerPendingEdit={isCellEditing ? registerPendingEdit : undefined} />

) })}

) } [V0_FILE]typescriptreact:file="components/spreadsheet/cell.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { memo, useRef, useEffect, useState, useCallback, useMemo } from "react" import type { CellStyle } from "@/lib/spreadsheet/types" import { cn } from "@/lib/utils" import { FormulaInput } from "./formula-highlighter" interface CellProps { row: number col: number value: string displayValue: string style?: CellStyle isSelected: boolean isActive: boolean isEditing: boolean width: number height: number onSelect: (row: number, col: number, extend?: boolean) => void onStartEditing: (row: number, col: number) => void onChange: (value: string) => void onNavigate: (direction: "up" | "down" | "left" | "right" | "tab" | "enter") => void registerPendingEdit?: (getValue: () => string | null) => void } function cellPropsAreEqual(prev: CellProps, next: CellProps): boolean { return ( prev.row === next.row && prev.col === next.col && prev.value === next.value && prev.displayValue === next.displayValue && prev.isSelected === next.isSelected && prev.isActive === next.isActive && prev.isEditing === next.isEditing && prev.width === next.width && prev.height === next.height && prev.style?.bold === next.style?.bold && prev.style?.italic === next.style?.italic && prev.style?.underline === next.style?.underline && prev.style?.align === next.style?.align && prev.style?.backgroundColor === next.style?.backgroundColor && prev.style?.textColor === next.style?.textColor && prev.style?.fontSize === next.style?.fontSize ) } export const Cell = memo(function Cell({ row, col, value, displayValue, style, isSelected, isActive, isEditing, width, height, onSelect, onStartEditing, onChange, onNavigate, registerPendingEdit, }: CellProps) { const cellRef = useRef(null) const [localValue, setLocalValue] = useState(value) const localValueRef = useRef(localValue) useEffect(() => { localValueRef.current = localValue }, [localValue]) useEffect(() => { if (!isEditing) { setLocalValue(value) } }, [value, isEditing]) useEffect(() => { if (isEditing && registerPendingEdit) { setLocalValue(value) registerPendingEdit(() => { if (localValueRef.current !== value) { return localValueRef.current } return null }) } }, [isEditing, value, registerPendingEdit]) useEffect(() => { if (isActive && !isEditing && cellRef.current) { cellRef.current.focus() } }, [isActive, isEditing]) const handleMouseDown = useCallback( (e: React.MouseEvent) => { if (isEditing) return e.preventDefault() onSelect(row, col, e.shiftKey) }, [row, col, onSelect, isEditing], ) const handleDoubleClick = useCallback(() => { if (!isEditing) { onStartEditing(row, col) } }, [row, col, onStartEditing, isEditing]) const handleInputKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault() e.stopPropagation() onChange(localValue) onNavigate("enter") } else if (e.key === "Tab") { e.preventDefault() e.stopPropagation() onChange(localValue) onNavigate(e.shiftKey ? "left" : "tab") } else if (e.key === "Escape") { e.preventDefault() e.stopPropagation() setLocalValue(value) onNavigate("down") } }, [localValue, onChange, onNavigate, value], ) const handleCellKeyDown = useCallback( (e: React.KeyboardEvent) => { if (isEditing) return if (e.key === "Enter" || e.key === "F2") { e.preventDefault() onStartEditing(row, col) } else if (e.key === "ArrowUp") { e.preventDefault() onNavigate("up") } else if (e.key === "ArrowDown") { e.preventDefault() onNavigate("down") } else if (e.key === "ArrowLeft") { e.preventDefault() onNavigate("left") } else if (e.key === "ArrowRight") { e.preventDefault() onNavigate("right") } else if (e.key === "Tab") { e.preventDefault() onNavigate(e.shiftKey ? "left" : "tab") } else if (e.key === "Delete" || e.key === "Backspace") { e.preventDefault() onChange("") } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) { setLocalValue(e.key) onStartEditing(row, col) } }, [isEditing, row, col, onChange, onNavigate, onStartEditing], ) const handleInputChange = useCallback((newValue: string) => { setLocalValue(newValue) }, []) const cellStyle = useMemo( () => ({ width, minWidth: width, maxWidth: width, height, minHeight: height, maxHeight: height, fontWeight: style?.bold ? "bold" : "normal", fontStyle: style?.italic ? "italic" : "normal", textDecoration: style?.underline ? "underline" : "none", textAlign: style?.align || "left", backgroundColor: style?.backgroundColor || undefined, fontSize: style?.fontSize ? `${style.fontSize}px` : "13px", color: style?.textColor && style.textColor !== "inherit" ? style.textColor : undefined, contain: "layout style paint", }), [ width, height, style?.bold, style?.italic, style?.underline, style?.align, style?.backgroundColor, style?.fontSize, style?.textColor, ], ) const textStyle = useMemo( () => ({ fontSize: style?.fontSize ? `${style.fontSize}px` : "13px", color: style?.textColor && style.textColor !== "inherit" ? style.textColor : undefined, }), [style?.fontSize, style?.textColor], ) return (

{isEditing ? ( ) : ( {displayValue} )}

) }, cellPropsAreEqual) [V0_FILE]typescriptreact:file="components/spreadsheet/spreadsheet.tsx" isEdit="true" isQuickEdit="true" "use client" import { useReducer, useCallback, useEffect, useState, useRef } from "react" import { Toolbar } from "./toolbar" import { FormulaBar } from "./formula-bar" import { Grid } from "./grid" import { FindDialog } from "./find-dialog" import { CommandPalette } from "./command-palette" import { ThemeSwitcher } from "@/components/theme-switcher" import type { SpreadsheetState, SpreadsheetAction, CellStyle, CellData, ClipboardData } from "@/lib/spreadsheet/types" import { getCellId, getSelectionCells } from "@/lib/spreadsheet/utils" const STORAGE_KEY = "spreadsheet-data" const DOC_NAME_KEY = "spreadsheet-doc-name" const TOTAL_ROWS = 100 const TOTAL_COLS = 26 const SAVE_DEBOUNCE_MS = 300 function getLastUsedCell(cells: CellData): { row: number; col: number } { let maxRow = 0 let maxCol = 0 for (const cellId of Object.keys(cells)) { const match = cellId.match(/^([A-Z]+)(\d+)$/) if (match) { const col = match[1].charCodeAt(0) - 65 const row = Number.parseInt(match[2], 10) - 1 if (cells[cellId]?.value || cells[cellId]?.formula) { maxRow = Math.max(maxRow, row) maxCol = Math.max(maxCol, col) } } } return { row: maxRow, col: maxCol } } let saveTimeout: NodeJS.Timeout | null = null function debouncedSaveToStorage(cells: CellData) { if (typeof window === "undefined") return if (saveTimeout) clearTimeout(saveTimeout) saveTimeout = setTimeout(() => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(cells)) } catch (e) { console.error("Failed to save to localStorage:", e) } }, SAVE_DEBOUNCE_MS) } function saveToStorage(cells: CellData) { debouncedSaveToStorage(cells) } function loadDocName(): string { if (typeof window === "undefined") return "ZeroGrid" try { return localStorage.getItem(DOC_NAME_KEY) || "ZeroGrid" } catch (e) { return "ZeroGrid" } } function saveDocName(name: string) { if (typeof window === "undefined") return try { localStorage.setItem(DOC_NAME_KEY, name) } catch (e) { console.error("Failed to save doc name:", e) } } const createInitialState = (cells: CellData): SpreadsheetState => ({ cells, selection: null, activeCell: null, editingCell: null, columnWidths: {}, rowHeights: {}, history: [cells], historyIndex: 0, }) function spreadsheetReducer(state: SpreadsheetState, action: SpreadsheetAction): SpreadsheetState { switch (action.type) { case "SET_CELL": { const cellId = getCellId(action.row, action.col) const existingCell = state.cells[cellId] const isFormula = action.value.startsWith("=") const newCells = { ...state.cells, [cellId]: { ...existingCell, value: isFormula ? "" : action.value, formula: isFormula ? action.value : undefined, }, } saveToStorage(newCells) const newHistory = state.history.slice(0, state.historyIndex + 1) newHistory.push(newCells) return { ...state, cells: newCells, history: newHistory, historyIndex: newHistory.length - 1, } } case "SET_STYLE": { if (!state.selection) return state const cellsToUpdate = getSelectionCells(state.selection.start, state.selection.end) const newCells = { ...state.cells } for (const { row, col } of cellsToUpdate) { const cellId = getCellId(row, col) newCells[cellId] = { ...newCells[cellId], value: newCells[cellId]?.value || "", style: { ...newCells[cellId]?.style, ...action.style, }, } } saveToStorage(newCells) const newHistory = state.history.slice(0, state.historyIndex + 1) newHistory.push(newCells) return { ...state, cells: newCells, history: newHistory, historyIndex: newHistory.length - 1, } } case "SELECT_CELL": return { ...state, activeCell: { row: action.row, col: action.col }, selection: { start: { row: action.row, col: action.col }, end: { row: action.row, col: action.col }, }, editingCell: null, } case "SELECT_RANGE": return { ...state, selection: { start: action.start, end: action.end }, editingCell: null, } case "SELECT_ALL": return { ...state, activeCell: { row: 0, col: 0 }, selection: { start: { row: 0, col: 0 }, end: { row: action.totalRows - 1, col: action.totalCols - 1 }, }, editingCell: null, } case "START_EDITING": return { ...state, editingCell: { row: action.row, col: action.col }, activeCell: { row: action.row, col: action.col }, } case "STOP_EDITING": return { ...state, editingCell: null, } case "SET_COLUMN_WIDTH": return { ...state, columnWidths: { ...state.columnWidths, [action.col]: action.width, }, } case "SET_ROW_HEIGHT": return { ...state, rowHeights: { ...state.rowHeights, [action.row]: action.height, }, } case "UNDO": { if (state.historyIndex <= 0) return state const newIndex = state.historyIndex - 1 const newCells = state.history[newIndex] saveToStorage(newCells) return { ...state, cells: newCells, historyIndex: newIndex, } } case "REDO": { if (state.historyIndex >= state.history.length - 1) return state const newIndex = state.historyIndex + 1 const newCells = state.history[newIndex] saveToStorage(newCells) return { ...state, cells: newCells, historyIndex: newIndex, } } case "INIT_CELLS": return { ...state, cells: action.cells, history: [action.cells], historyIndex: 0, } case "CLEAR_SELECTION": return { ...state, selection: null, activeCell: null, editingCell: null, } case "CLEAR_CELLS": { if (!state.selection) return state const cellsToUpdate = getSelectionCells(state.selection.start, state.selection.end) const newCells = { ...state.cells } for (const { row, col } of cellsToUpdate) { const cellId = getCellId(row, col) if (newCells[cellId]) { newCells[cellId] = { ...newCells[cellId], value: "", formula: undefined, } } } saveToStorage(newCells) const newHistory = state.history.slice(0, state.historyIndex + 1) newHistory.push(newCells) return { ...state, cells: newCells, history: newHistory, historyIndex: newHistory.length - 1, } } case "PASTE_CELLS": { const { clipboard, targetRow, targetCol } = action const newCells = { ...state.cells } const rowOffset = targetRow - clipboard.startRow const colOffset = targetCol - clipboard.startCol for (const { row, col, cell } of clipboard.cells) { const newRow = row + rowOffset const newCol = col + colOffset if (newRow >= 0 && newRow < TOTAL_ROWS && newCol >= 0 && newCol < TOTAL_COLS) { const cellId = getCellId(newRow, newCol) newCells[cellId] = { ...cell } } } saveToStorage(newCells) const newHistory = state.history.slice(0, state.historyIndex + 1) newHistory.push(newCells) return { ...state, cells: newCells, history: newHistory, historyIndex: newHistory.length - 1, } } default: return state } } export function Spreadsheet() { const [state, dispatch] = useReducer(spreadsheetReducer, {}, () => createInitialState({})) const [isHydrated, setIsHydrated] = useState(false) const [isFindOpen, setIsFindOpen] = useState(false) const [isCommandOpen, setIsCommandOpen] = useState(false) const [docName, setDocName] = useState("ZeroGrid") const [isEditingName, setIsEditingName] = useState(false) const nameInputRef = useRef(null) const clipboardRef = useRef(null) const isCutRef = useRef(false) useEffect(() => { const savedCells = loadFromStorage() if (Object.keys(savedCells).length > 0) { dispatch({ type: "INIT_CELLS", cells: savedCells }) } setDocName(loadDocName()) setIsHydrated(true) }, []) useEffect(() => { if (isEditingName && nameInputRef.current) { nameInputRef.current.focus() nameInputRef.current.select() } }, [isEditingName]) const handleDocNameChange = useCallback((newName: string) => { const trimmed = newName.trim() || "ZeroGrid" setDocName(trimmed) saveDocName(trimmed) setIsEditingName(false) }, []) const handleCellChange = useCallback((row: number, col: number, value: string) => { dispatch({ type: "SET_CELL", row, col, value }) }, []) const handleSelect = useCallback((row: number, col: number) => { dispatch({ type: "SELECT_CELL", row, col }) }, []) const handleSelectRange = useCallback((start: { row: number; col: number }, end: { row: number; col: number }) => { dispatch({ type: "SELECT_RANGE", start, end }) }, []) const handleStartEditing = useCallback((row: number, col: number) => { dispatch({ type: "START_EDITING", row, col }) }, []) const handleStopEditing = useCallback(() => { dispatch({ type: "STOP_EDITING" }) }, []) const handleColumnResize = useCallback((col: number, width: number) => { dispatch({ type: "SET_COLUMN_WIDTH", col, width }) }, []) const handleRowResize = useCallback((row: number, height: number) => { dispatch({ type: "SET_ROW_HEIGHT", row, height }) }, []) const handleStyleChange = useCallback((style: Partial) => { dispatch({ type: "SET_STYLE", style }) }, []) const handleUndo = useCallback(() => { dispatch({ type: "UNDO" }) }, []) const handleRedo = useCallback(() => { dispatch({ type: "REDO" }) }, []) const handleNavigateToCell = useCallback((row: number, col: number) => { dispatch({ type: "SELECT_CELL", row, col }) }, []) const activeCellId = state.activeCell ? getCellId(state.activeCell.row, state.activeCell.col) : null const activeCell = activeCellId ? state.cells[activeCellId] : null const activeCellValue = activeCell?.formula || activeCell?.value || "" const handleFormulaBarChange = useCallback( (value: string) => { if (state.activeCell) { handleCellChange(state.activeCell.row, state.activeCell.col, value) } }, [state.activeCell, handleCellChange], ) const handleFormulaBarCommit = useCallback(() => { handleStopEditing() }, [handleStopEditing]) const handleSelectAll = useCallback(() => { dispatch({ type: "SELECT_ALL", totalRows: TOTAL_ROWS, totalCols: TOTAL_COLS }) }, []) const handleOpenFind = useCallback(() => { setIsFindOpen(true) }, []) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0 const ctrlKey = isMac ? e.metaKey : e.ctrlKey // Don't trigger shortcuts when editing a cell or input element if (state.editingCell || (e.target as HTMLElement).tagName === "INPUT") { // Allow Delete/Backspace to clear cells even when editing if ((e.key === "Delete" || e.key === "Backspace") && state.selection && !state.editingCell) { e.preventDefault() dispatch({ type: "CLEAR_CELLS" }) } return } // Cmd/Ctrl + K - Command palette if (ctrlKey && e.key === "k") { e.preventDefault() setIsCommandOpen(true) return } // Cmd/Ctrl + F - Find if (ctrlKey && e.key === "f") { e.preventDefault() setIsFindOpen(true) return } // Cmd/Ctrl + A - Select all if (ctrlKey && e.key === "a") { e.preventDefault() handleSelectAll() return } // Cmd/Ctrl + C - Copy if (ctrlKey && e.key === "c" && state.selection) { e.preventDefault() const cellsToCopy = getSelectionCells(state.selection.start, state.selection.end) clipboardRef.current = { cells: cellsToCopy.map(({ row, col }) => ({ row, col, cell: state.cells[getCellId(row, col)] || { value: "" }, })), startRow: state.selection.start.row, startCol: state.selection.start.col, } isCutRef.current = false return } // Cmd/Ctrl + X - Cut if (ctrlKey && e.key === "x" && state.selection) { e.preventDefault() const cellsToCopy = getSelectionCells(state.selection.start, state.selection.end) clipboardRef.current = { cells: cellsToCopy.map(({ row, col }) => ({ row, col, cell: state.cells[getCellId(row, col)] || { value: "" }, })), startRow: state.selection.start.row, startCol: state.selection.start.col, } isCutRef.current = true return } // Cmd/Ctrl + V - Paste if (ctrlKey && e.key === "v" && clipboardRef.current && state.activeCell) { e.preventDefault() dispatch({ type: "PASTE_CELLS", clipboard: clipboardRef.current, targetRow: state.activeCell.row, targetCol: state.activeCell.col, }) if (isCutRef.current) { dispatch({ type: "CLEAR_CELLS" }) isCutRef.current = false } return } // Cmd/Ctrl + Z - Undo if (ctrlKey && !e.shiftKey && e.key === "z") { e.preventDefault() handleUndo() return } // Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y - Redo if ((ctrlKey && e.shiftKey && e.key === "z") || (ctrlKey && e.key === "y")) { e.preventDefault() handleRedo() return } // Delete/Backspace - Clear selected cells if ((e.key === "Delete" || e.key === "Backspace") && state.selection) { e.preventDefault() dispatch({ type: "CLEAR_CELLS" }) return } // Navigation with Shift for selection extension if (state.activeCell) { const { row, col } = state.activeCell // Shift + Space - Select row if (e.shiftKey && e.key === " ") { e.preventDefault() dispatch({ type: "SELECT_RANGE", start: { row, col: 0 }, end: { row, col: TOTAL_COLS - 1 }, }) return } // Ctrl/Cmd + Space - Select column if (ctrlKey && e.key === " ") { e.preventDefault() dispatch({ type: "SELECT_RANGE", start: { row: 0, col }, end: { row: TOTAL_ROWS - 1, col }, }) return } // Ctrl/Cmd + Shift + Space - Select all if (ctrlKey && e.shiftKey && e.key === " ") { e.preventDefault() handleSelectAll() return } // Shift + Arrow keys - Extend selection if (e.shiftKey && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault() const currentEnd = state.selection?.end || state.activeCell const newEnd = { ...currentEnd } if (e.key === "ArrowUp" && newEnd.row > 0) newEnd.row-- if (e.key === "ArrowDown" && newEnd.row < TOTAL_ROWS - 1) newEnd.row++ if (e.key === "ArrowLeft" && newEnd.col > 0) newEnd.col-- if (e.key === "ArrowRight" && newEnd.col < TOTAL_COLS - 1) newEnd.col++ dispatch({ type: "SELECT_RANGE", start: state.activeCell, end: newEnd, }) return } // Ctrl/Cmd + Shift + Arrow keys - Extend to edge if (ctrlKey && e.shiftKey && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault() const currentEnd = state.selection?.end || state.activeCell const newEnd = { ...currentEnd } if (e.key === "ArrowUp") newEnd.row = 0 if (e.key === "ArrowDown") newEnd.row = TOTAL_ROWS - 1 if (e.key === "ArrowLeft") newEnd.col = 0 if (e.key === "ArrowRight") newEnd.col = TOTAL_COLS - 1 dispatch({ type: "SELECT_RANGE", start: state.activeCell, end: newEnd, }) return } // Ctrl/Cmd + Home - Jump to A1 if (ctrlKey && e.key === "Home") { e.preventDefault() if (e.shiftKey && state.activeCell) { dispatch({ type: "SELECT_RANGE", start: state.activeCell, end: { row: 0, col: 0 }, }) } else { dispatch({ type: "SELECT_CELL", row: 0, col: 0 }) } return } // Ctrl/Cmd + End - Jump to last used cell if (ctrlKey && e.key === "End") { e.preventDefault() const lastCell = getLastUsedCell(state.cells) if (e.shiftKey && state.activeCell) { dispatch({ type: "SELECT_RANGE", start: state.activeCell, end: lastCell, }) } else { dispatch({ type: "SELECT_CELL", row: lastCell.row, col: lastCell.col }) } return } } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [state.activeCell, state.editingCell, state.selection, state.cells, handleUndo, handleRedo, handleSelectAll]) if (!isHydrated) { return (

) } return (

{isEditingName ? ( handleDocNameChange(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { handleDocNameChange(e.currentTarget.value) } else if (e.key === "Escape") { setIsEditingName(false) } }} className="font-mono text-sm font-medium text-foreground tracking-tight bg-transparent border-b border-foreground outline-none px-0 py-0.5 w-40" /> ) : ( )}

0} canRedo={state.historyIndex < state.history.length - 1} /> setIsFindOpen(false)} cells={state.cells} onNavigateToCell={handleNavigateToCell} /> setIsCommandOpen(false)} onUndo={handleUndo} onRedo={handleRedo} onSelectAll={handleSelectAll} onFind={handleOpenFind} canUndo={state.historyIndex > 0} canRedo={state.historyIndex < state.history.length - 1} />

) } function loadFromStorage(): CellData { if (typeof window === "undefined") return {} try { const saved = localStorage.getItem(STORAGE_KEY) if (saved) { return JSON.parse(saved) } } catch (e) { console.error("Failed to load from localStorage:", e) } return {} }7c:["$","$L83",null,{"chatId":"oV1npMbdfly","children":["$","$L84",null,{"data":{"@\"active-block\",\"oV1npMbdfly\",":{"id":"b_B6j1kdCd0OA","messageId":"ov7gpx4Ko9iwX2e0vmM67Aj4nB2k34jy","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Renaming default doc","taskNameComplete":"Renamed default doc"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"oV1npMbdfly\",":false,"":null},"children":"$L86"}]}]

About

Tags

Share

About

Tags

Share

More from webrenew